<template>
  <view class="recruitment-publish">
    <!-- 顶部导航 -->
    <view class="navbar">
	  <text class="navbar-left"></text>
      <!-- <text class="nav-title">发布职位</text> -->
      <view class="nav-right">
        <text class="draft-btn" @click="saveDraft">保存草稿</text>
        <text class="publish-btn" @click="submitJob">发布</text>
      </view>
    </view>
    
    <!-- 表单滚动区域 -->
    <scroll-view 
      class="form-scroll" 
      scroll-y 
      :scroll-with-animation="true"
      @scroll="onScroll"
    >
      <view class="form-container">
        <!-- 公司选择 -->
        <view class="form-section">
          <text class="section-title">公司信息</text>
          <view class="form-item company-selector" @click="chooseCompany">
            <text class="item-label required">公司</text>
            <view class="item-content">
              <text class="company-name">{{ selectedCompany.name || '选择公司' }}</text>
              <u-icon name="arrow-right" size="24" color="#ccc"></u-icon>
            </view>
            <view class="company-info" v-if="selectedCompany.name">
              <text class="company-address">{{ selectedCompany.address }}</text>
              <text class="company-scale">{{ selectedCompany.scale }}</text>
            </view>
          </view>
        </view>
        
        <!-- 职位基本信息 -->
        <view class="form-section">
          <text class="section-title">职位基本信息</text>
          
          <view class="form-item">
            <text class="item-label required">职位名称</text>
            <view class="item-content">
              <u--input 
                v-model="jobInfo.title" 
                placeholder="例如：无人机飞手、航拍工程师、植保技术员"
                @input="validateField('title')"
              ></u--input>
              <text class="error-hint" v-if="errors.title">{{ errors.title }}</text>
            </view>
          </view>
          
          <view class="form-item">
            <text class="item-label required">职位类型</text>
            <view class="item-content">
              <u-picker
                v-model="jobInfo.type" 
                :options="jobTypeOptions"
                placeholder="选择职位类型"
                @change="validateField('type')"
              ></u-picker>
              <text class="error-hint" v-if="errors.type">{{ errors.type }}</text>
            </view>
          </view>
          
          <view class="form-item">
            <text class="item-label required">工作地点</text>
            <view class="item-content">
              <u--input 
                v-model="jobInfo.location" 
                placeholder="例如：北京市朝阳区"
                @input="validateField('location')"
              ></u--input>
              <text class="error-hint" v-if="errors.location">{{ errors.location }}</text>
            </view>
          </view>
          
          <view class="form-item">
            <text class="item-label required">薪资范围</text>
            <view class="item-content">
              <u-picker 
                mode="multiSelector"
                :show="showSalaryPicker"
                :columns="salaryColumns"
                @confirm="handleSalaryConfirm"
                @cancel="showSalaryPicker = false"
                keyName="label"
              ></u-picker>
              <view 
                class="picker-display" 
                @click="showSalaryPicker = true"
              >
                <text>{{ jobInfo.salary || '选择薪资范围' }}</text>
                <u-icon name="arrow-down" size="24" color="#ccc"></u-icon>
              </view>
              <text class="error-hint" v-if="errors.salary">{{ errors.salary }}</text>
            </view>
          </view>
          
          <view class="form-item">
            <text class="item-label required">经验要求</text>
            <view class="item-content">
              <u-picker 
                v-model="jobInfo.experience" 
                :options="experienceOptions"
                placeholder="选择经验要求"
                @change="validateField('experience')"
              ></u-picker>
            </view>
          </view>
          
          <view class="form-item">
            <text class="item-label required">学历要求</text>
            <view class="item-content">
              <u-picker 
                v-model="jobInfo.education" 
                :options="educationOptions"
                placeholder="选择学历要求"
                @change="validateField('education')"
              ></u-picker>
            </view>
          </view>
          
          <view class="form-item">
            <text class="item-label">招聘人数</text>
            <view class="item-content">
              <u--input 
                v-model="jobInfo.headcount" 
                type="number"
                placeholder="例如：3"
              ></u--input>
            </view>
          </view>
        </view>
        
        <!-- 职位详情 -->
        <view class="form-section">
          <text class="section-title">职位详情</text>
          
          <view class="form-item textarea-item">
            <text class="item-label required">职位描述</text>
            <view class="item-content">
              <u--input 
                v-model="jobInfo.description" 
                type="textarea"
                rows="6"
                placeholder="请详细描述岗位职责、工作内容等（换行请用回车）"
                @input="validateField('description')"
              ></u--input>
              <text class="word-count">{{ jobInfo.description.length }}/500</text>
              <text class="error-hint" v-if="errors.description">{{ errors.description }}</text>
              <view class="suggestions">
                <text class="suggestion-tag" v-for="(tag, i) in descSuggestions" :key="i" @click="addDescTag(tag)">{{ tag }}</text>
              </view>
            </view>
          </view>
          
          <view class="form-item textarea-item">
            <text class="item-label required">任职要求</text>
            <view class="item-content">
              <u--input 
                v-model="jobInfo.requirements" 
                type="textarea"
                rows="6"
                placeholder="请详细描述任职资格、技能要求等（换行请用回车）"
                @input="validateField('requirements')"
              ></u--input>
              <text class="word-count">{{ jobInfo.requirements.length }}/500</text>
              <text class="error-hint" v-if="errors.requirements">{{ errors.requirements }}</text>
              <view class="suggestions">
                <text class="suggestion-tag" v-for="(tag, i) in reqSuggestions" :key="i" @click="addReqTag(tag)">{{ tag }}</text>
              </view>
            </view>
          </view>
          
          <view class="form-item textarea-item">
            <text class="item-label">福利待遇</text>
            <view class="item-content">
              <u--input 
                v-model="jobInfo.benefits" 
                type="textarea"
                rows="3"
                placeholder="例如：五险一金、带薪年假、节日福利等"
              ></u--input>
              <text class="word-count">{{ jobInfo.benefits.length }}/300</text>
              <view class="suggestions">
                <text class="suggestion-tag" v-for="(tag, i) in benefitSuggestions" :key="i" @click="addBenefitTag(tag)">{{ tag }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 联系方式 -->
        <view class="form-section">
          <text class="section-title">联系方式</text>
          
          <view class="form-item">
            <text class="item-label required">联系人</text>
            <view class="item-content">
              <u-input 
                v-model="jobInfo.contactPerson" 
                placeholder="招聘负责人姓名"
                @input="validateField('contactPerson')"
              ></u-input>
              <text class="error-hint" v-if="errors.contactPerson">{{ errors.contactPerson }}</text>
            </view>
          </view>
          
          <view class="form-item">
            <text class="item-label required">联系电话</text>
            <view class="item-content">
              <u--input 
                v-model="jobInfo.contactPhone" 
                type="number"
                placeholder="用于求职者联系"
                @input="validateField('contactPhone')"
              ></u--input>
              <text class="error-hint" v-if="errors.contactPhone">{{ errors.contactPhone }}</text>
            </view>
          </view>
          
          <view class="form-item">
            <text class="item-label">职位有效期</text>
            <view class="item-content">
              <u-picker 
                v-model="jobInfo.validity" 
                :options="validityOptions"
                placeholder="选择职位有效期"
              ></u-picker>
            </view>
          </view>
        </view>
        
        <!-- 底部留白 -->
        <view class="bottom-space"></view>
      </view>
    </scroll-view>
    
    <!-- 固定底部操作栏 -->
    <view class="bottom-bar" :class="{show: isScrollDown}">
      <view class="form-progress">
        <text class="progress-text">已完成 {{ completionRate }}%</text>
        <view class="progress-bar">
          <view class="progress-fill" :style="{width: completionRate + '%'}"></view>
        </view>
      </view>
      <view class="bottom-actions">
        <button class="cancel-btn" @click="confirmCancel">取消</button>
        <button class="submit-btn" @click="submitJob":disabled="!isFormValid">确认发布</button>
      </view>
    </view>
    
    <!-- 确认对话框 -->
    <u-modal 
      v-model="showCancelModal" 
      title="提示" 
      content="确定要放弃发布吗？已填写的内容将保存为草稿" 
      confirm-text="放弃" 
      cancel-text="继续编辑"
      @confirm="cancelPublish"
      @cancel="showCancelModal = false"
    ></u-modal>
    
    <!-- 成功提示 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 滚动状态
      scrollTop: 0,
      isScrollDown: false,
      lastScrollTop: 0,
      
      // 公司信息
      selectedCompany: {},
      showCompanySelector: false,
      
      // 表单数据
      jobInfo: {
        title: '',
        type: '',
        location: '',
        salary: '',
        experience: '',
        education: '',
        headcount: '',
        description: '',
        requirements: '',
        benefits: '',
        contactPerson: '',
        contactPhone: '',
        validity: '30'
      },
      
      // 错误信息
      errors: {},
      
      // 选择器配置
      jobTypeOptions: [
        { label: '全职', value: 'fulltime' },
        { label: '兼职', value: 'parttime' },
        { label: '实习', value: 'intern' },
        { label: '临时', value: 'temporary' }
      ],
      
      experienceOptions: [
        { label: '不限', value: 'unlimited' },
        { label: '应届毕业生', value: 'fresh' },
        { label: '1年以内', value: 'less1' },
        { label: '1-3年', value: '1-3' },
        { label: '3-5年', value: '3-5' },
        { label: '5-10年', value: '5-10' },
        { label: '10年以上', value: 'more10' }
      ],
      
      educationOptions: [
        { label: '不限', value: 'unlimited' },
        { label: '高中及以下', value: 'highschool' },
        { label: '中专/中技', value: 'technical' },
        { label: '大专', value: 'college' },
        { label: '本科', value: 'bachelor' },
        { label: '硕士', value: 'master' },
        { label: '博士', value: 'phd' }
      ],
      
      validityOptions: [
        { label: '7天', value: '7' },
        { label: '15天', value: '15' },
        { label: '30天', value: '30' },
        { label: '60天', value: '60' },
        { label: '90天', value: '90' }
      ],
      
      // 薪资选择器
      showSalaryPicker: false,
      salaryColumns: [
        [
          { label: '3k以下', value: '3k以下' },
          { label: '3k-5k', value: '3k-5k' },
          { label: '5k-8k', value: '5k-8k' },
          { label: '8k-10k', value: '8k-10k' },
          { label: '10k-15k', value: '10k-15k' },
          { label: '15k-20k', value: '15k-20k' },
          { label: '20k-30k', value: '20k-30k' },
          { label: '30k-50k', value: '30k-50k' },
          { label: '50k以上', value: '50k以上' }
        ]
      ],
      
      // 建议标签
      descSuggestions: [
        '无人机飞行操作',
        '设备日常维护',
        '飞行任务规划',
        '航拍数据处理',
        '撰写飞行报告'
      ],
      
      reqSuggestions: [
        '持有AOPA证书',
        '熟练操作大疆系列',
        '无不良飞行记录',
        '具备团队合作精神',
        '能适应户外作业'
      ],
      
      benefitSuggestions: [
        '五险一金',
        '带薪年假',
        '绩效奖金',
        '专业培训',
        '设备补贴',
        '节日福利'
      ],
      
      // 模态框状态
      showCancelModal: false
    };
  },
  
  computed: {
    // 计算表单完成率
    completionRate() {
      let completed = 0;
      let total = 0;
      
      // 计算必填项完成情况
      const requiredFields = [
        'title', 'type', 'location', 'salary', 
        'experience', 'education', 'description',
        'requirements', 'contactPerson', 'contactPhone'
      ];
      
      requiredFields.forEach(field => {
        total++;
        if (this.jobInfo[field]) completed++;
      });
      
      // 计算选填项完成情况（权重较低）
      const optionalFields = [
        'headcount', 'benefits', 'validity'
      ];
      
      optionalFields.forEach(field => {
        total += 0.3; // 选填项权重为30%
        if (this.jobInfo[field]) completed += 0.3;
      });
      
      // 公司选择
      total += 1;
      if (this.selectedCompany.name) completed += 1;
      
      return Math.round((completed / total) * 100);
    },
    
    // 表单是否有效
    isFormValid() {
      return this.validateForm() && Object.keys(this.errors).length === 0;
    }
  },
  
  methods: {
    // 返回上一页
    navigateBack() {
      if (this.hasFormChanged()) {
        this.showCancelModal = true;
      } else {
        uni.navigateBack();
      }
    },
    
    // 检测表单是否有变化
    hasFormChanged() {
      const emptyJobInfo = {
        title: '', type: '', location: '', salary: '',
        experience: '', education: '', headcount: '',
        description: '', requirements: '', benefits: '',
        contactPerson: '', contactPhone: '', validity: '30'
      };
      
      // 检查是否有字段变化
      for (const key in emptyJobInfo) {
        if (this.jobInfo[key] !== emptyJobInfo[key]) {
          return true;
        }
      }
      
      // 检查公司是否选择
      return !!this.selectedCompany.name;
    },
    
    // 选择公司
    chooseCompany() {
      // 实际应用中应该跳转到公司选择页面
      uni.navigateTo({
        url: '/pages/company/select',
        events: {
          // 监听返回的公司信息
          selectCompany: (company) => {
            this.selectedCompany = company;
          }
        }
      });
    },
    
    // 处理薪资选择
    handleSalaryConfirm(e) {
      this.jobInfo.salary = e.value[0].label;
      this.showSalaryPicker = false;
      this.validateField('salary');
    },
    
    // 添加描述标签
    addDescTag(tag) {
      this.jobInfo.description = this.jobInfo.description 
        ? `${this.jobInfo.description}\n• ${tag}`
        : `• ${tag}`;
      this.validateField('description');
    },
    
    // 添加要求标签
    addReqTag(tag) {
      this.jobInfo.requirements = this.jobInfo.requirements 
        ? `${this.jobInfo.requirements}\n• ${tag}`
        : `• ${tag}`;
      this.validateField('requirements');
    },
    
    // 添加福利标签
    addBenefitTag(tag) {
      this.jobInfo.benefits = this.jobInfo.benefits 
        ? `${this.jobInfo.benefits} ${tag}`
        : tag;
    },
    
    // 验证单个字段
    validateField(field) {
      const errors = {...this.errors};
      
      switch(field) {
        case 'title':
          if (!this.jobInfo.title) {
            errors.title = '请输入职位名称';
          } else if (this.jobInfo.title.length > 50) {
            errors.title = '职位名称不能超过50个字符';
          } else {
            delete errors.title;
          }
          break;
          
        case 'type':
          if (!this.jobInfo.type) {
            errors.type = '请选择职位类型';
          } else {
            delete errors.type;
          }
          break;
          
        case 'location':
          if (!this.jobInfo.location) {
            errors.location = '请输入工作地点';
          } else {
            delete errors.location;
          }
          break;
          
        case 'salary':
          if (!this.jobInfo.salary) {
            errors.salary = '请选择薪资范围';
          } else {
            delete errors.salary;
          }
          break;
          
        case 'experience':
          if (!this.jobInfo.experience) {
            errors.experience = '请选择经验要求';
          } else {
            delete errors.experience;
          }
          break;
          
        case 'education':
          if (!this.jobInfo.education) {
            errors.education = '请选择学历要求';
          } else {
            delete errors.education;
          }
          break;
          
        case 'description':
          if (!this.jobInfo.description) {
            errors.description = '请填写职位描述';
          } else if (this.jobInfo.description.length < 20) {
            errors.description = '职位描述至少20个字符';
          } else if (this.jobInfo.description.length > 500) {
            errors.description = '职位描述不能超过500个字符';
          } else {
            delete errors.description;
          }
          break;
          
        case 'requirements':
          if (!this.jobInfo.requirements) {
            errors.requirements = '请填写任职要求';
          } else if (this.jobInfo.requirements.length < 20) {
            errors.requirements = '任职要求至少20个字符';
          } else if (this.jobInfo.requirements.length > 500) {
            errors.requirements = '任职要求不能超过500个字符';
          } else {
            delete errors.requirements;
          }
          break;
          
        case 'contactPerson':
          if (!this.jobInfo.contactPerson) {
            errors.contactPerson = '请输入联系人姓名';
          } else {
            delete errors.contactPerson;
          }
          break;
          
        case 'contactPhone':
          const phoneReg = /^1[3-9]\d{9}$/;
          if (!this.jobInfo.contactPhone) {
            errors.contactPhone = '请输入联系电话';
          } else if (!phoneReg.test(this.jobInfo.contactPhone)) {
            errors.contactPhone = '请输入正确的手机号码';
          } else {
            delete errors.contactPhone;
          }
          break;
      }
      
      this.errors = errors;
    },
    
    // 验证整个表单
    validateForm() {
      const requiredFields = [
        'title', 'type', 'location', 'salary', 
        'experience', 'education', 'description',
        'requirements', 'contactPerson', 'contactPhone'
      ];
      
      let isValid = true;
      const errors = {};
      
      // 验证必填字段
      requiredFields.forEach(field => {
        this.validateField(field);
        if (this.errors[field]) {
          isValid = false;
        }
      });
      
      // 验证公司是否选择
      if (!this.selectedCompany.name) {
        isValid = false;
		uni.showToast({
			icon:'none',
			title:'请先选择公司'
		})
      }
      
      return isValid;
    },
    
    // 保存草稿
    saveDraft() {
      if (!this.selectedCompany.name) {
       uni.showToast({
			icon:'none',
			title:'请先选择公司'
		})
        return;
      }
      
      // 模拟保存草稿
      uni.showLoading({ title: '保存中...' });
      
      setTimeout(() => {
        uni.hideLoading();
		uni.showToast({
			icon:'none',
			title:'草稿保存成功'
		})
      }, 800);
    },
    
    // 提交发布
    submitJob() {
      if (!this.validateForm()) {
        // 滚动到第一个错误字段
        const firstErrorField = Object.keys(this.errors)[0];
        if (firstErrorField) {
          const query = `.form-item:has(.item-label:contains('${this.getFieldLabel(firstErrorField)}'))`;
          const el = document.querySelector(query);
          if (el) {
            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
            // 高亮错误字段
            el.classList.add('error-highlight');
            setTimeout(() => {
              el.classList.remove('error-highlight');
            }, 2000);
          }
        }
        return;
      }
      
      // 模拟提交表单
      uni.showLoading({ title: '发布中...' });
      
      setTimeout(() => {
        uni.hideLoading();
        this.$refs.uToast.show({
          title: '职位发布成功',
          type: 'success',
          duration: 2000,
          onClose: () => {
            uni.navigateBack({
              delta: 1
            });
          }
        });
      }, 1200);
    },
    
    // 获取字段标签文本
    getFieldLabel(field) {
      const labels = {
        title: '职位名称',
        type: '职位类型',
        location: '工作地点',
        salary: '薪资范围',
        experience: '经验要求',
        education: '学历要求',
        description: '职位描述',
        requirements: '任职要求',
        contactPerson: '联系人',
        contactPhone: '联系电话'
      };
      
      return labels[field] || '';
    },
    
    // 确认取消
    confirmCancel() {
      this.showCancelModal = true;
    },
    
    // 取消发布
    cancelPublish() {
      // 如果有内容则保存为草稿
      if (this.hasFormChanged()) {
        this.saveDraft();
      }
      
      setTimeout(() => {
        uni.navigateBack();
      }, 800);
    },
    
    // 监听滚动
    onScroll(e) {
      this.scrollTop = e.detail.scrollTop;
      
      // 检测滚动方向，控制底部栏显示
      if (this.scrollTop > this.lastScrollTop && this.scrollTop > 500) {
        this.isScrollDown = true;
      } else {
        this.isScrollDown = false;
      }
      
      this.lastScrollTop = this.scrollTop;
    }
  }
};
</script>

<style lang="scss" scoped>
.recruitment-publish {
  background-color: #f5f7fa;
  min-height: 100vh;
  position: relative;
}

// 导航栏
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  padding: 0 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 99;
  
  .nav-title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333;
  }
  
  .nav-right {
    display: flex;
    align-items: center;
    gap: 25rpx;
    
    .draft-btn {
      font-size: 28rpx;
      color: #fff;
      padding: 8rpx 15rpx;
    }
    
    .publish-btn {
      font-size: 28rpx;
      color: #fff;
      font-weight: 500;
      padding: 8rpx 15rpx;
    }
  }
}

// 表单滚动区域
.form-scroll {
  height: calc(100vh - 100rpx);
}

.form-container {
  padding: 20rpx 30rpx;
}

// 表单区块
.form-section {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
  
  .section-title {
    display: block;
    font-size: 26rpx;
    color: #999;
    padding: 20rpx 30rpx;
    background-color: #fafafa;
    border-bottom: 1rpx solid #eee;
  }
}

// 表单项
.form-item {
  display: flex;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f5f7fa;
  align-items: center;
  
  &:last-child {
    border-bottom: none;
  }
  
  .item-label {
    font-size: 28rpx;
    color: #333;
    width: 160rpx;
    position: relative;
    
    &.required::after {
      content: '*';
      color: #ff4d4f;
      position: absolute;
      left: -15rpx;
      top: 0;
    }
  }
  
  .item-content {
    flex: 1;
    position: relative;
    
    .u-input {
      font-size: 28rpx;
      color: #333;
      padding-right: 40rpx;
    }
    
    .error-hint {
      display: block;
      font-size: 24rpx;
      color: #ff4d4f;
      margin-top: 8rpx;
      line-height: 1.4;
    }
    
    .word-count {
      display: block;
      font-size: 22rpx;
      color: #999;
      text-align: right;
      margin-top: 8rpx;
    }
    
    .suggestions {
      display: flex;
      flex-wrap: wrap;
      gap: 12rpx;
      margin-top: 15rpx;
      
      .suggestion-tag {
        font-size: 24rpx;
        color: #4facfe;
        background-color: rgba(79, 172, 254, 0.1);
        padding: 5rpx 15rpx;
        border-radius: 40rpx;
        white-space: nowrap;
      }
    }
  }
}

// 公司选择项
.company-selector {
  flex-direction: column;
  align-items: flex-start;
  
  .item-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .company-name {
      font-size: 28rpx;
      color: #333;
    }
  }
  
  .company-info {
    width: 100%;
    margin-top: 10rpx;
    padding-left: 0;
    display: flex;
    gap: 20rpx;
    flex-wrap: wrap;
    
    .company-address, .company-scale {
      font-size: 24rpx;
      color: #666;
      display: flex;
      align-items: center;
      
      &::before {
        content: '';
        display: inline-block;
        width: 4rpx;
        height: 4rpx;
        border-radius: 50%;
        background-color: #999;
        margin-right: 8rpx;
      }
    }
  }
}

// 多行文本项
.textarea-item {
  align-items: flex-start;
  padding-top: 25rpx;
  
  .item-content {
    .u-input {
      min-height: 200rpx;
      line-height: 1.6;
      padding-top: 5rpx;
    }
  }
}

// 选择器显示样式
.picker-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 28rpx;
  color: #333;
  padding: 10rpx 0;
}

// 底部操作栏
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 98;
  
  &.show {
    transform: translateY(0);
  }
  
  .form-progress {
    margin-bottom: 15rpx;
    
    .progress-text {
      font-size: 24rpx;
      color: #666;
      display: block;
      margin-bottom: 8rpx;
    }
    
    .progress-bar {
      height: 8rpx;
      background-color: #eee;
      border-radius: 4rpx;
      overflow: hidden;
      
      .progress-fill {
        height: 100%;
        background-color: #4facfe;
        transition: width 0.5s ease;
      }
    }
  }
  
  .bottom-actions {
    display: flex;
    gap: 20rpx;
    
    .cancel-btn, .submit-btn {
      flex: 1;
      height: 80rpx;
      border-radius: 40rpx;
      font-size: 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .cancel-btn {
      background-color: #f5f7fa;
      color: #666;
      border: none;
    }
    
    .submit-btn {
      background-color: #4facfe;
      color: #fff;
      border: none;
      
      &:disabled {
        background-color: #b3d8ff;
        color: #e6f4ff;
      }
    }
  }
}

// 错误高亮
.error-highlight {
  animation: shake 0.5s;
  background-color: rgba(255, 77, 79, 0.05);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5rpx); }
  20%, 40%, 60%, 80% { transform: translateX(5rpx); }
}

// 底部留白
.bottom-space {
  height: 300rpx;
}
</style>
